<script setup lang="ts">
import {ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";

const router = useRouter();
const route = useRoute();

// 标签页激活状态
const active = ref('index');

// 路由深度配置，用于判断页面切换方向
const routeDepth = ref<Record<string, number>>({
  '/': 1,
  '/team': 2,
  '/user': 3,
  '/search': 4
});

// 动态过渡动画名称
const transitionName = ref('page-slide');

// 监听路由变化，判断前进/后退以切换动画
watch(() => route.path, (newPath, oldPath) => {
  const newDepth = routeDepth.value[newPath] || 1;
  const oldDepth = routeDepth.value[oldPath] || 1;
  transitionName.value = newDepth > oldDepth ? 'page-slide' : 'page-slide-reverse';
});

// 左侧返回按钮点击事件
const onClickLeft = () => {
  router.back();
};

// 右侧搜索按钮点击事件
const onClickRightUserSearch = () => {
  router.push('/search');
};

const onClickRightNotify = () => {
  router.push('/notify');
};
</script>

<template>
  <!-- 导航栏 -->
  <div style="z-index: 100;display: block; position: sticky; top: 0; background: white;">
    <van-nav-bar
        :title="router.currentRoute.value.meta.title"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    >
      <template #right>
        <!-- 分开两个图标，移除van-space避免相互影响 -->
        <van-icon
            name="credit-pay"
            style="margin-right: 16px; cursor: pointer; font-size: 18px;"
        />
        <van-icon
            name="search"
            size="18"
            @click.stop="onClickRightUserSearch"
            style="border-radius: 5px; cursor: pointer;"
        />
      </template>
    </van-nav-bar>
  </div>

  <!-- 带过渡动画的内容区域 -->
  <transition name="van-slide-down" mode="out-in">
    <div id="content">
      <router-view/>
    </div>
  </transition>

  <!-- 底部导航 -->
  <van-tabbar style="height: 60px" route>
    <div class="tabbar-box">
      <div class="tab-list">
        <van-tabbar-item to="/" icon="home-o">主页</van-tabbar-item>
      </div>
      <div>
        <van-tabbar-item to="/team" icon="friends-o" name="team">队伍</van-tabbar-item>
      </div>
      <div>
        <van-tabbar-item to="/user" icon="contact-o">个人</van-tabbar-item>
      </div>
    </div>
  </van-tabbar>
</template>

<style scoped>
/* 内容区域样式 */
#content {
  /* 计算中间内容区高度：减去导航栏和底部tabbar高度 */
  min-height: calc(100vh - 46px - 50px);
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-bottom: 80px;
}

.tabbar-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 0 auto;
  padding: 25px;

}


/* 正向滑动动画 - 前进方向 */
/* 进入动画 */
.page-slide-enter-from {
  transform: translateX(100%);
  opacity: 0;
}

.page-slide-enter-active {
  transition: all 0.3s ease-out;
}

.page-slide-enter-to {
  transform: translateX(10px);
  opacity: 1;
}

/* 退出动画 */
.page-slide-leave-from {
  transform: translateX(10px);
  opacity: 1;
}

.page-slide-leave-active {
  transition: all 0.3s ease-out;
}

.page-slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

/* 反向滑动动画 - 后退方向 */
/* 进入动画 */
.page-slide-reverse-enter-from {
  transform: translateX(-100%);
  opacity: 0;
}

.page-slide-reverse-enter-active {
  transition: all 0.3s ease-out;
}

.page-slide-reverse-enter-to {
  transform: translateX(10px);
  opacity: 1;
}

/* 退出动画 */
.page-slide-reverse-leave-from {
  transform: translateX(10px);
  opacity: 1;
}

.page-slide-reverse-leave-active {
  transition: all 0.3s ease-out;
}

.page-slide-reverse-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
</style>
